<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <script src="../lib/layui/layui.all.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="../data/sensor.js"></script>

</head>
<body>

<!--  <div class="layui-card">-->
<!--      <div class="layui-card-body ">-->

<!--      </div>-->
<!--  </div>-->
<!--  <div class="layui-progress layui-progress-big" lay-showPercent="yes">-->
<!--      <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>-->
<!--  </div>-->
  <table class="layui-table">
      <tr>
          <td>安装数量：</td>
          <td>
             <span id="install_Count"></span>
          </td>
      </tr>
      <tr>
          <td>故障/正常：</td>
          <td>
              <span id="span_runStatus"></span>
          </td>
      </tr>
      <tr>
          <td>安装时间：</td>
          <td>
              <span id="install_Time"></span>
          </td>
      </tr>
      <tr>
          <td>最新同步：<i class="layui-icon layui-icon-refresh-3" onclick="manual()"></i></td>
          <td> <span id="last_refTime">0分钟前</span></td>
      </tr>
      <tr>
          <td>设备详情：</td>
          <td>
              <table>
                  <thead>
                      <tr>
                          <th>地点</th>
                          <th>IP</th>
                          <th>传感器链接</th>
                          <th>LED屏链接</th>

                          <th>CH(%)</th>
                          <th>CO2(%)</th>
                          <th>CO(ppm)</th>
                          <th>温度(℃)</th>
                          <th>湿度(RH%)</th>
                          <th>O2(%)</th>
                      </tr>
                  </thead>
                  <tbody  id="deviceRunStatus_body">

                  </tbody>
              </table>
          </td>
      </tr>
  </table>

  <script>
      //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
      layui.use('element', function(){
          var element = layui.element;
      });
  </script>
  <script type="">
    function manual()
    {
        sensorServer.manualRef({"id":0});
    }
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    $(function () {
         let resultData=sensorServer.getMinesList({"page":1,"rows":10});
         let id=getQueryVariable("id");
         let resultInfo=sensorServer.getMinesInfoById({"id":id});
         if(resultInfo!=null){
             if(resultInfo.lastReportDetails==null)
                 return;
             let resultInfoData=JSON.parse(resultInfo.lastReportDetails);
             let dataList=resultInfoData.data;
             let sumCount=resultInfoData.total;
             $("#install_Count").html(sumCount);
             debugger;
             $("#install_Time").html(resultInfo.installTime.substr(0,7));
             $("#last_refTime").html(resultInfo.lastReportTime);

             let faultDeviceCount=0
             for (let i=0;i<dataList.length;i++){
                 let info=dataList[i];
                 if(info.deviceConnect==false||info.deviceConnect==0||info.ledConnect==false||info.ledConnect==0) {
                     faultDeviceCount++;
                 }
                     let greenPoint="<i class='layui-icon' style='color:green;margin-right:5px'>&#xe617;</i>";
                     let redPoint="<i class='layui-icon' style='color:#d21d19;margin-right:5px'>&#xe617;</i>";

                     let sensorStatus=greenPoint;
                     let ledStatus=greenPoint
                     if(info.deviceConnect==false||info.deviceConnect==0){
                         sensorStatus=redPoint;
                     }
                     if(info.ledConnect==false||info.ledConnect==0){
                         ledStatus=redPoint;
                     }

                     let trstr="<tr>" +
                         "<td>"+info.devicelocation+"</td>" +
                         "<td>"+info.deviceip+"</td>" +
                         "<td>"+sensorStatus+"</td>" +
                         "<td>"+ledStatus+"</td>" +
                         "<td>"+info.ch4+"</td>" +
                         "<td>"+info.co2+"</td>" +
                         "<td>"+info.co+"</td>" +
                         "<td>"+info.temperature+"</td>" +
                         "<td>"+info.humidity+"</td>" +
                         "<td>"+info.o2+"</td>" +
                         "</tr>"
                     $("#deviceRunStatus_body").append(trstr);

             }
             let errALink='<a onclick="showErrDevice()" target="_blank" style="text-decoration:underline;">'+faultDeviceCount+'</a>';
             $("#span_runStatus").html(errALink+"/"+dataList.length);
         }
    })
    function  showErrDevice() {
        let skinStr='layui-layer-lan';
       // let url="mine_details.html?id="+id;  //"http://localhost:9001/map_warningList.html";
        layer.open({
            skin:skinStr, // 'layui-layer-lan', // skin: 'layui-layer-demo', //样式类名
            type: 2
            ,title: "详细信息" //不显示标题栏
            ,closeBtn: 1
            ,maxmin:true
            ,fixed:false
            ,area: ['600px','400px']
            ,shade: 0.2
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            //,btn: '关闭全部'
            ,btnAlign: 'c'
            ,move:true
            ,moveType: 1 //拖拽模式，0或者1
            ,resize:true
            //,content:url
            ,content:'<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
        });
    }
</script>

</body>
</html>
